<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

     <!-- Bootstrap CSS -->
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <style>
        #app {
            margin-left:50px;
            margin-right:50px;
            height: 100%;
        }
        div button {
            width:100%;
        }
        .row {
            padding-top: 10px;
        }
        .col-md-5,.col-md-1 {
            padding-left:2px;
            padding-right:2px;
        }
        .title {
            font-size: 22px;
        }
        .desc {
            font-size: 18px;
        }
        .url {
            font-size: 18px;
            color: green;
        }
        .blog-pagnation-item{
            display: inline-block;
            padding: 8px;
            border: 1px solid #d0d0d5;
            color: #333;
           
        }
        .blog-pagnation-item:hover{
            background: #4e4eeb;
            color: #fff;
        }
        .blog-pagnation-item.actvie{
            background: #4e4eeb;
            color: #fff;
        }
        .blog-pagnation-wrapper{
            height: 40px;
            text-align: center;
            display: flex;
        }

        </style>

</head>
<body>
    <div id="app">

        <div class="row">
            <div class="col-md-5">
                <input type="text" class="form-control" placeholder="请输入关键字" id = "query">
            </div>
            <div class="col-md-1">
                <button class="btn btn-success" onclick="search()">搜索</button>
            </div>
        </div>
   

        <div class="content" id="content1">
            <div class="row"> 
                <!--用来存放结果-->
                <div class="title"><a href="http://"></a></div>
                <div class="desc"></div>
                <div class="url"></div>
            </div>
        </div>
        <!-- 分页按钮 -->
        <div  class="blog-pagnation-wrapper" id="page">
            <button onclick="goFirstPage()"  class="blog-pagnation-item" >首页</button> 
            <button onclick="goBeforePage()" class="blog-pagnation-item">上一页</button> 
            <button id="pageDisplay" class="blog-pagnation-item">0/0</button> 
            <button onclick="goNextPage()"   class="blog-pagnation-item">下一页</button>
            <button onclick="goLastPage()"   class="blog-pagnation-item">末页</button>
        </div>

    </div>


</body>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<script>
     //当前页码
     var pindex = 1;
    //一页几条数据
    var psize = 5;
    //最大页数
    var pcount = 1;
    //获取当前页码
    pindex = getUrlValue("pindex")==""?1:getUrlValue("pindex");

    function init(){
        jQuery.ajax({
            success:function () {
                jQuery("#page").hide();
            }
        });
    }
    init();

    function search(){
        //非空校验
        var query = jQuery("#query");
        if(query.val()==""){
            alert("请输入要查询的内容");
            query.focus;
            return;
        }
        jQuery.ajax({
            url:"/search/search1",
            type:"POST",
            data:{"query":query.val(),"pindex":pindex,"psize":psize},
            success:function(result){
                if(result!=null && result.code==200 && result.data!=null){
                    var contentHtml = "";
                    for(var i = 0;i<result.data.list.length;i++){
                        var contentInfo = result.data.list[i];
                        contentHtml += '<div class="content">';
                        contentHtml += '<div class="row"> ';
                        contentHtml += '<div class="title"><a href=" ' + contentInfo.showUrl + ' ">'+contentInfo.titile+'</a></div>';
                        contentHtml += '<div class="desc">'+contentInfo.desc+'</div>';
                        contentHtml += '<div class="url">'+ contentInfo.showUrl+'</div>';
                        contentHtml += '</div>';
                        contentHtml += '</div>';
                    }
                    jQuery("#content1").html(contentHtml);
                    //使用哈希表返回的，
                    pcount = result.data.pcount;
                    jQuery("#pageDisplay").html(pindex+"/"+pcount);
                    jQuery("#page").show();
                }else if(result.code==10){
                    jQuery("#content1").html("没有查询到您要的数据");
                    jQuery("#pageDisplay").html("0/0");
                }else{
                    alert(result.msg);
                }

            }
        });


    }


    function getUrlValue(key){
        // ?id=1&v=2
        var params = location.search;
        if(params.length > 1){
            // id=1&v=2
            params = location.search.substring(1);
            var paramArr = params.split("&");
            for(var i=0;i<paramArr.length;i++){
                var kv = paramArr[i].split("=");
                if(kv[0] == key){
                    //是我要查询的参数
                    return kv[1];
                }
            }
        }
    return "";
    }


    function goFirstPage(){
            if(pindex<=1){
                alert("当前已经在首页了");
                return;
            }
            pindex = 1;
            getCurrentPage();
        }

        function goBeforePage(){
            if(pindex <= 1){
                alert("当前已经在首页了");
                return;
            }
            pindex = parseInt(pindex)-1;
            getCurrentPage();
        }

        function goNextPage(){
            if(pindex >= pcount){
                pindex=pcount
                alert("当前是最后一页");
                return;
            }
            pindex = parseInt(pindex)+1;
            getCurrentPage();
        }

        function goLastPage(){
            if(pindex>=pcount){
                alert("已经在末页了");
                return;
            }
            pindex =pcount;
            getCurrentPage();
        }

        function getCurrentPage(){
            //非空校验
            var query = jQuery("#query");
            if(query.val()==""){
                alert("请输入要查询的内容");
                query.focus;
                return;
            }
            jQuery.ajax({
                url:"/search/search1",
                type:"POST",
                data:{"query":query.val(),"pindex":pindex,"psize":psize},
                success:function(result){
                    if(result!=null && result.code==200 && result.data!=null){
                        var contentHtml = "";
                        for(var i = 0;i<result.data.list.length;i++){
                            var contentInfo = result.data.list[i];
                            contentHtml += '<div class="content">';
                            contentHtml += '<div class="row"> ';
                            contentHtml += '<div class="title"><a href=" ' + contentInfo.showUrl + ' ">'+contentInfo.titile+'</a></div>';
                            contentHtml += '<div class="desc">'+contentInfo.desc+'</div>';
                            contentHtml += '<div class="url">'+ contentInfo.showUrl+'</div>';
                            contentHtml += '</div>';
                            contentHtml += '</div>';
                        }
                        jQuery("#content1").html(contentHtml);
                        //使用哈希表返回的，
                        pcount = result.data.pcount;
                        jQuery("#pageDisplay").html(pindex+"/"+pcount);
                        jQuery("#page").show();
                    }else if(result.code==10){
                        jQuery("#content1").html("没有查询到您要的数据");
                        jQuery("#pageDisplay").html("0/0");
                    }else{
                        alert(result.msg);
                    }

                }
            });
        }


</script>




</html>